<template>
<div>
  <br>
  <el-menu
      background-color="#EEEEEE"
      default-active="/main/index"
      router="true"
      style="height: 1000px;"
  > <!-- router="true"使用menu-item的index属性值作为路由跳转目标 -->
  <el-menu-item index="/main/index">
      <el-icon><icon-menu /></el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="/main/echarts">
      <el-icon><icon-menu /></el-icon>
      <span>数据统计</span>
    </el-menu-item>
    <!-- sub-menu 下级菜单 -->
    <el-sub-menu index="1">
      <template #title>
        <el-icon><setting /></el-icon>
        <span>航班查询</span>
      </template>
        <el-menu-item index="/main/flight">
          <el-icon><Clock /></el-icon>
          航班实时信息
        </el-menu-item>
        <el-menu-item index="/main/fqueryDetailEnter1">
          <el-icon><Clock /></el-icon>
          进港航班信息
        </el-menu-item>
        <el-menu-item index="/main/fqueryDetailOut1">
          <el-icon><Clock  /></el-icon>
          出港航班信息
        </el-menu-item>
       
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Operation /></el-icon>
        <span>系统用户管理</span>
      </template>
      
      <el-menu-item index="/main/user"><el-icon><UserFilled /></el-icon>个人信息管理</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><message /></el-icon>
        <span>公告管理</span>
      </template>
      <el-menu-item index="/main/Manage"><el-icon><Edit /></el-icon>公告管理</el-menu-item>
    </el-sub-menu>
  </el-menu>
</div>
</template>
<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
    Plus, Crop , Operation ,Message,Edit,Clock,UserFilled

} from '@element-plus/icons'
</script>


<style scoped>
.el-menu-item.is-active {
  background-color: #3370ff !important;
  color: #fff;
  span {
    color: #fff !important;
  }
}
.el-menu-item:hover {
  background-color: #2c3e50;
  color: white !important;
}
</style>